<template>
	<view class="" :style="[scrollstyle]">
		<scroll-view scroll-y="true" class="scroll-Y" :refresher-triggered="triggered" refresher-background="#f4f7f8"
			:refresher-threshold="100" @scrolltolower="onPulling" :refresher-enabled="false"
			@refresherrefresh="onRefresh" refresher-default-style="black">
			<!-- {{ seardata }} -->
			<slot name="default" :list="list">
				{{ list }}
			</slot>
			<!-- {{ status }} -->
			<!-- <u-loadmore :status="status" /> -->
			<u-loadmore :status="status"></u-loadmore>
			<view class="" style="height: 2rpx"> </view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			seardata: {
				typeof: Object,
				default: () => {
					return {};
				},
			},
			api: {
				typeof: Function,
				default: async () => {
					return () => [];
				},
			},
			cmax: {
				typeof: [Number, String],
				default: 10,
			},
			onPullingfalge: {
				typeof: Boolean,
				default: true,
			},
			customStyle: {
				typeof: Object,
				default: () => {
					return {};
				},
			},
		},
		data() {
			return {
				status: "loadmore",
				triggered: false,
				list: [],
			};
		},
		computed: {
			scrollstyle() {
				return {
					height: `100%`,
					...this.customStyle,
				};
			},
			reqdata() {
				let r = {
					...this.seardata,
				};
				r.pageSize = 10;
				r.pageNo = Math.ceil(this.list.length / r.pageSize) + 1;
				console.log(r, "1");
				// current=1&size=10
				return r;
			},
		},
		mounted() {
			if (this.onPullingfalge) {
				this.onPulling();
			}
		},
		methods: {
			async onPulling() {
				console.log("onPulling");
				if (this.status == "loading") {
					return;
				}
				this.status = "loading";
				await this.getdata();
			},
			async onRefresh() {
				console.log("onRefresh");
				if (this.status == "loading") {
					return;
				}
				this.status = "loading";
				this.triggered = true;
				this.list = [];

				await this.getdata();
				this.triggered = false;
			},
			async getdata() {
				uni.showLoading();
				let reqdata = await this.api(this.reqdata);

				console.log(reqdata);
				reqdata =
					reqdata?.data?.records ||
					reqdata?.data?.ipage?.records ||
					reqdata?.data?.list || [];
				console.log(reqdata);
				uni.hideLoading();
				this.list = this.list.concat(reqdata);

				this.status = reqdata.length >= this.reqdata.pageSize ? "more" : "noMore";
				console.log(this.status);
			},
		},
	};
</script>

<style lang="scss">
	.scroll-Y {
		height: 100%;
	}

	.carditem {
		background: #fff;
		margin: 30rpx;
		border-radius: 10rpx;

		.ddh {
			height: 100rpx;
			font-size: 30rpx;
			position: relative;
			padding: 0 30rpx;

			&::after {
				content: "";
				position: absolute;
				left: 30rpx;
				bottom: 0;
				height: 1rpx;
				background: #e5e5e5;
				right: 30rpx;
			}
		}

		.sj {
			height: 80rpx;
			font-size: 28rpx;
			position: relative;
			padding: 0 30rpx;

			&::after {
				content: "";
				position: absolute;
				left: 30rpx;
				bottom: 0;
				height: 1rpx;
				background: #e5e5e5;
				right: 30rpx;
			}
		}

		.je {
			height: 120rpx;
			justify-content: flex-end;
			padding: 0 30rpx;
			font-size: 24rpx;

			.text {
				font-size: 36rpx;
				font-weight: bold;
				color: #2093f5;
			}
		}
	}
</style>